import {画布} from './模块/画布.js';


// 元素引用
const 圆形按钮 = document.querySelector('.圆形');
const 方形按钮 = document.querySelector('.正方形');
const 三角按钮 = document.querySelector('.三角形');


// 准备画布
const 画布1 = new 画布('我的画布', document.body, 480, 320);
画布1.准备环境();
画布1.准备列表();


// 通用加载函数
async function 加载形状(模块路径, 构造参数) {
    try {
        const 模块 = await import(模块路径);
        const 形状 = new 模块[构造参数.名称](
            画布1.环境,
            画布1.列表码,
            ...构造参数.参数列表,
        );
        形状.绘制();
        形状.报面积();
        形状.报周长();
    }
    catch (错误) {
        console.log(`加载 ${构造参数.名称} 模块失败: `, 错误.message);
    }
}


方形按钮.addEventListener(
    'click',
    () => {
        加载形状(
            './模块/正方形.js',
            {
                名称: '正方形',
                参数列表: [50, 50, 100, 'blue']
            },
        );
    },
);


圆形按钮.addEventListener(
    'click',
    () => {
        加载形状(
            './模块/圆形.js',
            {
                名称: '圆形',
                参数列表: [75, 200, 100, 'yellow']
            },
        );
    },
);


三角按钮.addEventListener(
    'click',
    () => {
        加载形状(
            './模块/正三角形.js',
            {
                名称: '正三角形',
                参数列表: [100, 300, 100, 'green']
            },
        );
    },
);